<template>
    <div>
        <div  class="nav bg-black bg-opacity-20 text-white h-16 ">
            <header class="flex  justify-between leading-12 p-2">
                <div class="flex h-10 leading-12 ml-3">
                    <!-- <img :src="logo" class="h-10 w-10 mr-3"> -->
                    <span class="text-3xl font-extrabold">LOGO</span>
                </div>
                <!-- phone -->
                <svg-icon @click="handleMenuBtnClick" class="block sm:block md:hidden text-2xl" icon-class="bar-chart-horizontal-line" ></svg-icon>

                <!-- pc -->
                <div class=" hidden md:flex mr-3">
                    <div class="nav-line bg-white h-1 transition-all" ref="nav-line"
                     v-bind:style="{'width':(navLineWidth+2)+'px','left':navLineLeft+'px','top':navLineTop+'px'}"></div>
                    <div class="nav-line bg-white h-1 move transition-all" ref="nav-move-line"
                     v-bind:style="{'width':navMoveWidth+'px','left':navMoveLeft+'px','top':navLineTop+'px'}"></div>
                    <router-link :to="item.url" tag="div"   v-for="(item,index) in navList" v-bind:key="index"  >
                       <div  class=" text-white p-3 pl-6 pr-6 cursor-pointer"  :ref="preItemStr+index"
                      @mouseenter="mouseenter(preItemStr+index)" @mouseleave="mouseleave(preItemStr+index)" 
                       @click="navClick(preItemStr+index,item.url)">
                             {{$t(item.name)}}
                       </div>
                    </router-link>
                    <div class=" ml-8 mr-2  pt-4 cursor-pointer select-none text-xs opacity-60 hover:opacity-100 " @click="changeLaguages" >
                        <span style="  border: 1px solid;  padding: 3px; border-radius: 3px;">{{lang=='zh'?'En':'Zh'}}</span>
                    </div>
                </div>
            </header>
            <div  v-show="showMenu">
                <div class=" menu text-white  text-center animated mt-2" @click="handleMenuBtnClick" style="min-height:9rem">
                    <!--    -->
                    <!-- <transition name="collapse"> -->
                          <div class="mask bg-black bg-opacity-20 animated " v-bind:class="showMask?'show-mask':''" ></div>
                    <!-- </transition> -->
                  
                    <div class="list">
                        <transition name="slide-fade" v-for="(item,index) in navList" v-bind:key="index" >
                            <router-link :to="item.url" tag="div"  class="h-12 leading-10 "  v-show="showList"  v-bind:style="{'transition-delay':index*.1+'s'}" >
                               {{$t(item.name)}}
                            </router-link>
                        </transition>
                    </div>
                </div>
                <div class="shadow "  @click="handleMenuBtnClick"></div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    name:"Nav",
    data() {
        return {
            lang:'',
            showMenu:false,
            showMask:false,
            showList:false,
            navList:[
                {name:'nav.home',url:'/home'},
                {name:'nav.productIntro',url:'/product'},
                {name:'nav.contactUs',url:'/contact'},
            ],
            preItemStr:'item_',
            curItem:'item_0',
            navLineLeft:0,
            navLineWidth:0,
            navMoveLeft:0,
            navMoveWidth:0,
            navLineTop:0,
        }
    },
    watch:{
        '$route.path':function(newVal,oldVal){
            this.setCurItem()
            this.setNavLine()
        }
    },
    mounted(){
        this.init()
        this.lang = this.$i18n.locale
    },
  methods:{
      init(){
        this.setCurItem()
        this.setNavLine()
 
      },
      setCurItem(){
          let curUrl = this.$route.path
          let navList = this.navList
          let curItem = this.curItem
          console.info(curUrl)
         for (let index = 0; index < navList.length; index++) {
            const element = navList[index];
            if(element.url == curUrl){
                curItem = this.preItemStr + index
                console.info(curItem)
            }
        }
        this.curItem = curItem
      },
      setNavLine(){
        //设置导航栏下标
        let curItem = this.$refs[this.curItem]
        if(curItem){
            curItem=curItem[0]
            this.navLineLeft = curItem.offsetLeft
            this.navLineWidth = curItem.clientWidth
            this.navLineTop = curItem.clientHeight + curItem.offsetTop - 3
            this.updateNavMoveLine()
        }
      },
      handleMenuBtnClick(){
          let showMenu = !this.showMenu
            let _this   = this
          if(showMenu){
            this.showMenu = showMenu
            this.showMask = showMenu
            setTimeout(function(){
                _this.showList = showMenu
            },500)
          }else{
            this.showList = showMenu
            this.showMenu = showMenu
            this.showMask = showMenu
          }
          
      },

      mouseenter(e){
        let curItem = this.$refs[e][0]
        this.navMoveLeft = curItem.offsetLeft
        this.navMoveWidth = curItem.clientWidth
      },
     mouseleave(e){
        this.updateNavMoveLine()
     },
     navClick(e,url){
        this.curItem = e
        let curItem = this.$refs[e][0]
        this.navLineLeft = curItem.offsetLeft
        this.navLineWidth = curItem.clientWidth
     },
     updateNavMoveLine(){
        this.navMoveLeft = this.navLineLeft
        this.navMoveWidth = this.navLineWidth
     },
    changeLaguages(){
      let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
      this.lang = lang
      this.$nextTick(()=>{
            this.setNavLine()
      })
   
    }
  }
}
</script>

<style scoped> 
.nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.nav header{
    position: relative;
    z-index: 999;
}
.menu{
    transition:all 0.3 ease-out;
    position: relative;
    z-index: 1;
}

.mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.show-mask{
    animation-duration: .6s;
   animation-name:backInDown;
}
.hide-mask{
    animation-duration: .5s;
   animation-name:backOutUp;
}
.list{
    position: relative;
    z-index: 2;
}
.show-item {

    animation: bounceInRight 1s ;
}
.shadow{
    height: 100vh;
    position: absolute;
    top: 0;
    width: 100%;
    background: #0000006b;
    animation: shadowShow 1s ease-out;
    
    opacity: .1;
    z-index: 0;
}

.nav-line{
    position: absolute;
}



/* 动画 */

@keyframes shadowShow {
    0% {
        opacity:0;
       
    }
    to {
        
        opacity: .1;
    }
}
@keyframes bounceInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(30px, 0, 0) scaleX(1);
        transform:translate3d(30px, 0, 0) scaleX(1)
    }
    to {
        -webkit-transform:translateZ(0);
        opacity: 1;
        transform:translateZ(0)
    }
}
@keyframes backInDown {
    0% {
        height: 0 ;
        opacity:.5
    }
    /* 80% {
        transform:translateY(0) ;
        opacity:.7
    } */
    to {
        height: 100% ;
        opacity:1
    }
}
@keyframes backOutUp {
    0% {
        transform:scale(1);
        opacity:1
    }
    20% {
        transform:translateY(0) ;
        opacity:.7
    }
    to {
        transform:translateY(-600px) ;
        opacity:.7
    }
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
/* .slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} */
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}


.collapse-enter-active {
    max-height: 100 rem;
    transform: max-height .3s ease ;
}
 
/* .collapse-enter,.collapse-leave-active {
    max-height: 0 rem;
    
    transform: all 1s cubic-bezier(1.0,0.5,0.8,1.0);

} */

</style>